<template>
  <div>
    <div class="addr-item flex-row-sb-center" v-for="item in addrList" :key="item.id">
      <div class="addr-l">
        <p class="addr-title">
          <span class="username"><strong>{{item.name}}</strong></span>
          <span class="user-call">{{item.sex === 1 ? '先生': '女士'}}</span>
          <span class="user-mobile">{{item.phone}}</span>
        </p>
        <p class="user-addr">
          <span :class="'tag' + ' tag'+item.tag_type" v-if="item.tag_type">{{item.tag}}</span>
          <span>{{item.address + item.address_detail}}</span></p>
      </div>
      <div class="addr-r">
        <span @click="editAddress(item)" class="iconfont icon-changyongicon-"></span>
        <span class="iconfont icon-shanchu" @click="removeAddr(item)"></span>
      </div>
    </div>
  </div>
</template>

<script>
  import { getMyAddress, removeAddress } from '@/api/elm-data'
export default {
  name: 'addr-list',
  data() {
    return {
      addrList: []
    }
  },
  methods: {
    editAddress(item) {
      window.sessionStorage.setItem('editaddresstitle', '修改地址')
      this.$router.push({name: 'editaddress', query: item})
    },
    async removeAddr(item) {
      const res = await removeAddress(item)
      if(res.status === 200) {
        this.getAddrList()
      }
    },
    async getAddrList() {
      const userID = window.sessionStorage.getItem('USER_ID')
      const { data } = await getMyAddress(userID)
      this.addrList = data
    }
  },
  async created() {
    window.sessionStorage.getItem('editaddresstitle') && window.sessionStorage.removeItem('editaddresstitle')
    this.getAddrList()
  },
}
</script>

<style scoped>
  .addr-item {
    padding: 15px 20px;
    color: #565656;
  }
  .username {
    font-size: 34px;
    color: #000;
  }
  .addr-l {
    width: 80%;
  }
  .addr-title {
    margin-bottom: 0;
  }
  .user-call {
    margin: 0 5px;
    font-size: 32px;
    color: #565656;
  }
  .user-mobile {
    font-size: 32px;
  }
  .user-addr {
    margin-top: 0;
    font-size: 28px;
    display: flex;
    align-items: center;
  }
  .tag {
    white-space: nowrap;
    padding: 2px;
    margin-right: 5px;
    font-size: 22px;
  }
  .tag1{
    border: 1px solid #ff5500;
    color: #ff5500;
  }
  .tag2{
    border: 1px solid #00ff00;
    color: #00ff00;
  }
  .tag3{
    border: 1px solid #0097FF;
    color: #0097FF;
  }
  .addr-r .iconfont {
    font-size: 42px;
    color: #818181;
  }
  .icon-changyongicon- {
    margin-right: 20px;
    vertical-align: sub;
    font-size: 60px!important;
  }
</style>
